<template>
  <div style="display: flex;align-items: center;margin-bottom: 30px;">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item @click="$router.push('/home/everyView/warehouseList')"><span
          class="headclass">仓库列表</span></el-breadcrumb-item>
      <el-breadcrumb-item>{{ houseName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="openAdd" style="margin-left: 60px;">新增快递</el-button>
  </div>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" inline>
      <el-form-item label="选择订单类型：">
        <el-select v-model="form.orderIds" multiple placeholder="请选择" style="width: 240px" @change="getList">
          <el-option v-for="item in store.warehouseShopgetOrderTypeListTbale" :key="item.id" :label="item.name"
            :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="快递名称" width="120">
        <template #default="scope">{{ scope.row.expressName }}</template>
      </el-table-column>
      <el-table-column label="出单店铺" width="120">
        <template #default="scope">{{ scope.row.taobaoUserNick }}</template>
      </el-table-column>
      <el-table-column label="订单类型" width="120">
        <template #default="scope">{{ scope.row.orderNames }}</template>
      </el-table-column>
      <el-table-column label="每日最大出单数" width="170">
        <template #default="scope">
          {{ scope.row.orderOutNum }}/ <input v-model="scope.row.maxOutNum" class="headclass"
            style="width: 90px;border:none" @blur='setexpressContent(scope.row, "最大出单数")'>
        </template>
      </el-table-column>
      <el-table-column label="快递费用" width="120">
        <template #default="scope">
          <input v-model="scope.row.expressDeliveryFee" class="headclass" style="width: 90px;border:none"
            @blur='setexpressContent(scope.row, "快递费用")' />
        </template>
      </el-table-column>
      <el-table-column label="备注" width="120">
        <template #default="scope">
          <input v-model="scope.row.remark" class="headclass" style="width: 90px;border:none"
            @blur='setexpressContent(scope.row, "备注")' />
        </template>
      </el-table-column>
      <el-table-column label="面单编码" width="120">
        <template #default="scope">{{ scope.row.orderCode }}</template>
      </el-table-column>
      <el-table-column label="是否轮转" width="120">
        <template #default="scope">
          <!-- <el-switch v-model="scope.row.isTransfer" inline-prompt active-text="是" inactive-text="否"
            @click='setexpressContent(scope.row, "轮转")' /> -->
          <div @click='setexpressContent(scope.row, "轮转")' class="headclass">
            {{ scope.row.isTransfer == 1 ? '是' : '否' }}
          </div>
          <!-- <input v-model="scope.row.isTransfer" class="headclass" style="width: 90px;border:none"
            @blur='setexpressContent(scope.row, "备注")' />
          {{ scope.row.isTransfer == 1 ? '是' : '否' }} -->
        </template>
      </el-table-column>
      <el-table-column label="出单类型" width="220">
        <template #default="scope">{{ scope.row.outOrderTypeNames }}</template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 新增 -->
  <div>
    <el-dialog v-model="dialogVisible" width="500">
      <span>
        <div style="display: flex;align-items: center;">
          <div style="width: 110px;"> 对应订单类型：</div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label='item.id' :value="item.id"
              v-for="item in store.warehouseShopgetOrderTypeListTbaleUnEvery" :key="item.id">{{ item.name
              }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="width: 110px;">出单类型：</div>
          <el-checkbox-group v-model="checkListOut">
            <el-checkbox :label='item.id' :value="item.id" v-for="item in store.warehouseShopGetOutOrderTypeListTable"
              :key="item.id">{{
                item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="display: flex;align-items: center;">
          <div>快递类型：</div>
          <!-- value-key="id" -->
          <el-select v-model="expressSelect" style="width: 120px;" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in ExpressTypeSourceTab" :key="item.id" />
          </el-select>
          <el-button type="primary" @click="getExpressList" style="margin-left: 60px;">搜索</el-button>
        </div>
        <div style="display: flex;align-items: center;">
          <el-checkbox-group v-model="checkListexpressName">
            <el-checkbox :label='item.id' :value="item.id" v-for="item in expreslistOur" :key="item.id">{{
              item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="creatExpress">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { warehouseShoplist, getExpressTypeList, warehouseShopgetWarehouseAddExpressList, warehouseShopcreate, warehouseShopupdate, warehouseShopDelete } from '@/api/index'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAlertsStore } from '@/store/index'
const store = useAlertsStore()
const route = useRoute()
const houseName = ref('')
onBeforeMount(() => {
  houseName.value = route.query.houseName
  form.value.warehouseId = route.query.id
  store.warehouseShopgetOrderTypeListBtn()
})
// 输入框多选
// 输入框多选
const tableData = ref([])
const getList = () => {
  warehouseShoplist(form.value).then(res => {
    const { data: { data } } = res
    tableData.value = data.list
  })
}
// do not use same name with ref
const form = ref({
  warehouseId: '',
  pageNum: 1,
  pageSize: 10
})
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}

// 多选
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 新增
const dialogVisible = ref(false)
const openAdd = () => {
  store.warehouseShopGetOutOrderTypeListBtn()
  expressTypeList()
  dialogVisible.value = true
}
// 快递类型来源下拉列表
const expressSelect = ref('')
const ExpressTypeSourceTab = ref([])
const expressTypeList = () => {
  getExpressTypeList().then(res => {
    const { data: { data } } = res
    ExpressTypeSourceTab.value = data
    ExpressTypeSourceTab.value.shift()
  })
}
const expreslistOur = ref([])
const getExpressList = () => {
  warehouseShopgetWarehouseAddExpressList({
    warehouseId: form.value.warehouseId,
    expressTypeId: expressSelect.value
  }).then(res => {
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    expreslistOur.value = data
  })
}
// 保存
const checkList = ref([])
const checkListOut = ref([])
const checkListexpressName = ref([])
const creatExpress = () => {
  console.log('checkListexpressName.value')
  console.log(checkListexpressName.value)

  const c = []
  const d = []
  store.warehouseShopgetOrderTypeListTbaleUnEvery.forEach(element => {
    if (checkList.value.includes(element.id)) {
      d.push(element.name)
    }
  })
  store.warehouseShopGetOutOrderTypeListTable.forEach(element => {
    if (checkListOut.value.includes(element.id)) {
      c.push(element.name)
    }
  })
  const a = {
    warehouseId: form.value.warehouseId,
    orderIds: checkList.value.join(),
    orderNames: d.join(),
    outOrderTypeIds: checkListOut.value.join(),
    outOrderTypeNames: c.join(),
    shopExpressIds: checkListexpressName.value
  }
  warehouseShopcreate(a).then(res => {
    dialogVisible.value = false
    ElMessage.success('操作成功')
  })
}

// const isTransfer = ref('是')
// 修改
const setexpressContent = (row, name) => {
  if (name === '最大出单数') {
    warehouseShopupdate({
      id: row.id,
      key: 'outNum',
      value: row.maxOutNum
    }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (name === '快递费用') {
    warehouseShopupdate({
      id: row.id,
      key: 'expressDeliveryFee',
      value: row.expressDeliveryFee
    }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (name === '备注') {
    warehouseShopupdate({
      id: row.id,
      key: 'remark',
      value: row.remark
    }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (name === '备注') {
    warehouseShopupdate({
      id: row.id,
      key: 'outOrderTypes',
      value: row.outOrderTypes
    }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (name === '轮转') {
    console.log('scope.row.isTransfer')
    console.log(row.isTransfer)
    warehouseShopupdate({
      id: row.id,
      key: 'isTransfer',
      value: row.isTransfer === 1 ? 0 : 1
    }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }
}
const deleteRow = (row) => {
  warehouseShopDelete({ id: row.id }).then(res => {
    ElMessage.success('操作成功')
    getList()
  })
}

</script>

<style lang='less' scoped></style>
